<template>
  <!-- 右侧的大容器 -->
  <div class="cateRight">
    <!-- 顶部轮播容器 -->
    <div class="topImg">
      <!-- vant的轮播组件 -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        duration="2000"
        indicator-color="white"
      >
        <!-- 每一屏 v-for展示数据 -->
        <van-swipe-item v-for="item in bannerList" :key="item.id"
          ><van-image width="264" height="96" :src="item.picUrl"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图下面的部分 外侧大容器 -->
    <div class="goodsList">
      <!-- 每一类商品外侧的包裹容器 -->
      <div v-for="item in categoryGroupList" :key="item.id">
        <div class="wenzi">{{ item.name }}</div>
        <!-- vant组件 分割线 -->
        <van-divider
          :hairline="false"
          :style="{
            borderColor: '#bbb',
            padding: '0 14px',
            marginTop: '5px',
          }"
        />
        <!-- vant组件  宫格  展示每一个商品类图片+类名-->
        <van-grid :column-num="3" :border="false">
          <van-grid-item
            v-for="goods in item.categoryList"
            :key="goods.id"
            @click="itemClick(goods.id)"
          >
            <van-image class="goodsItemImg" :src="goods.wapBannerUrl" />
            <div class="goodsItemName">{{ goods.name }}</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { reqCateList } from '@/axios'
export default {
  name: 'CateRight',
  props: ['categoryId'],
  data() {
    return {
      currentCategory: {}, // 当前一级分类
      bannerList: [], //轮播图数组
      categoryGroupList: [], //商品二级分类数据
    }
  },
  watch: {
    categoryId(newValue) {
      // 拿着新的id 去掉接口 获取数据 渲染页面
      this.getRightData(newValue)
    },
  },
  mounted() {},
  methods: {
    async getRightData(id) {
      const res = await reqCateList(id)
      // 从接口返回的数据里拿到 一级分类数组 轮播图数组 二级分类数组 ,赋值给data里定义好的相应数组
      this.currentCategory = res.data.currentCategory
      this.bannerList = res.data.currentCategory.bannerList
      this.categoryGroupList = res.data.categoryGroupList
    },

    // 跳转到指定的一级分类下的二级分类 currentCategory.id 是已点击的左侧导航栏的一级分类id, subCategoryId 是当前点击的二级分类的id
    itemClick(subCategoryId) {
      console.log(this.currentCategory.id, subCategoryId)
      this.$router.push(
        '/goodslist/' + this.currentCategory.id + '/' + subCategoryId
      )
    },
  },
}
</script>

<style scoped>
/* .cateRight{
    width: 100%;
    height: 100%;
}
.cateRight .topImg{
    width: 100%;
    height: 1.92rem;
}
.cateRight .goodsList{
    margin-bottom: 0.12rem;
    
   
    
}
.cateRight .goodsList .goodsContainer{
    width: 1.44rem;
    height: 1.44rem;
    
    
} */
.cateRight {
  background-color: #fff;
}
.cateRight .topImg {
  width: 264px;
  /* border-radius: 8px; */
  padding: 0 14px;
}
.goodsItemName {
  height: 0.72rem;
  font-size: 0.24rem;
  color: #333;
  text-align: center;
  line-height: 0.36rem;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.goodsItemImg {
  display: block;
  width: 100%;
  background: #fff;
  height: 100%;
}
.wenzi {
  font-size: 0.35rem;
  font-weight: bolder;

  color: #333;
  padding-left: 17px;
}
/* 轮播图样式 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 96px; */
  text-align: center;
}
</style>